<template>
  <el-row class="main-container">
    <el-col :span="24" class="query-form-wrapper">
      <el-card shadow="hover">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="用户名称" prop="userName">
            <el-input
              v-model="queryParams.likeInputStr"
              placeholder="请输入用户名称"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input
              v-model="queryParams.telephone"
              placeholder="请输入手机号码"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24" class="content-wrapper">
      <el-card shadow="hover">
        <template #header>
          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
            </el-col>
          </el-row>
        </template>
        <el-table :data="tableData" empty-text="暂无数据" border style="width: 100%">
          <el-table-column key="userName" prop="userName" label="用户名称" align="center" />
          <el-table-column key="idCard" prop="idCard" label="身份证号" align="center" />
          <el-table-column key="telephone" prop="telephone" label="联系电话" align="center" />
          <el-table-column key="accountName" prop="accountName" label="账号名称" align="center" />
          <el-table-column
            label="操作"
            fixed="right"
            width="180"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-tooltip v-if="scope.row.supperFlag !== '1'" content="修改" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Edit"
                  @click="handleUpdate(scope.row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-dialog
      ref="formDialogRef"
      v-model="dialog.visible"
      :title="dialog.title"
      width="400px"
      append-to-body
      @close="closeDialog"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户姓名" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户姓名" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel()">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-row>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import { useAuthStore } from '@/stores/modules/auth'
const authStore = useAuthStore()
const loginUser = computed(() => authStore.loginUser)

// 对话框
const dialog = reactive({
  visible: false,
  title: '',
  type: 'add'
})

// 表单实例
const formRef = useTemplateRef<FormInstance>('formRef')

// 查询参数
const queryParams = reactive({
  likeInputStr: '',
  telephone: ''
})

// 表单数据
const form = reactive({
  userId: '',
  userName: ''
})

/** 确认密码校验 */
const checkPass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('确认密码不能为空'))
  } else {
    callback()
  }
}

// 表单校验规则
const rules = reactive({
  accountName: [
    { required: true, message: '账号名称不能为空', trigger: 'blur' },
    {
      min: 2,
      max: 20,
      message: '账号名称长度必须介于 2 和 20 之间',
      trigger: 'blur'
    }
  ],
  accountPassword: [
    { required: true, message: '用户密码不能为空', trigger: 'blur' },
    {
      min: 5,
      max: 20,
      message: '用户密码长度必须介于 5 和 20 之间',
      trigger: 'blur'
    },
    { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\ |', trigger: 'blur' }
  ],
  confirmPassword: [{ validator: checkPass, trigger: 'blur' }]
})

// 表格数据
const tableData = ref<any[]>([])

onMounted(() => {
  handleQuery()
})

/** 查询用户列表 */
const handleQuery = () => {}

/** 新增用户点击事件 */
const handleAdd = () => {
  reset()
  dialog.title = '新增用户'
  dialog.visible = true
  dialog.type = 'add'
}

/** 修改用户点击事件 */
const handleUpdate = (row: any) => {
  dialog.title = '修改用户'
  dialog.visible = true
  dialog.type = 'update'
  form.userId = row.userId
  form.userName = row.userName
}

/** 删除用户点击事件 */
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确认删除用户【' + row.userName + '】吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {})
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除用户'
      })
    })
}

/** 提交表单 */
const submitForm = async () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
    }
  })
}

/** 关闭对话框 */
const closeDialog = () => {
  dialog.visible = false
}

/** 取消按钮 */
const cancel = () => {
  dialog.visible = false
  reset()
}

/** 重置表单 */
const reset = () => {
  form.userId = ''
  form.userName = ''
}
</script>

<style scoped lang="less">
.main-container {
  height: 100%;
  :deep(.el-card__body) {
    padding: 10px 20px;
  }
  :deep(.el-form-item--default) {
    margin-bottom: 0;
  }
  .query-form-wrapper {
    height: 52px;
    margin-bottom: 8px;
  }
  .content-wrapper {
    height: calc(100% - 60px);
    :deep(.el-card) {
      height: 100%;
    }
    :deep(.el-card__body) {
      height: 100%;
    }
  }
}
</style>
